<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="static/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="static/ace/css/font-awesome.css" />
<link rel="stylesheet" href="static/login/css/login.css">
</head>
<body>
	<div id = "home">
		<form action="login" method="post">
			<label class="block clearfix">
				<span class="block input-icon input-icon-right">
					<input type="text"  name="username" iscookie="true" class="form-control" placeholder="请输入用户名"  id="username" value="420562222222222222"/>
					<i class="ace-icon fa fa-user"></i>
				</span>
			</label>
			<label class="block clearfix">
				<span class="block input-icon input-icon-right">
					<input type="password" name="password" class="form-control" placeholder="请输入密码" id="password" value="222222"/>
					<i class="ace-icon fa fa-lock"></i>
				</span>
			</label>
			<label class="block clearfix">
				<div class="input-group">
		             <input type="text" style="width:150px;" name="randCode" class="form-control" placeholder="请输入验证码 "  id="randCode"/>
		             <input id="verify" type="hidden" value="${code }">
		             <span class="input-group-addon" style="padding: 0px;"><img id="randCodeImage" src="verifyCode?uuid=${uuid}"  /></span>
	            </div>
			</label>
			<div class="clearfix">
			  	<label class="inline">
				    <input type="checkbox" class="ace" id="on_off"  name="remember" value="yes"/>
				    <span class="lbl">记住用户名</span>
			  	</label>
			  	<button type="button" id="but_login" class="width-35 pull-right btn btn-sm btn-primary" style="background-color:#e21d15 !important;" >
				    <i class="ace-icon fa fa-key"></i>
				    <span class="bigger-110">登录</span>
			  	</button>
			  	<a href="" class="btn btn-link">忘记密码？</a>
			</div>
		</form>
	</div>
	<script type="text/javascript" src="static/js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="static/layui/layui.js"></script>
	<script type="text/javascript">
	$("#randCodeImage").click(function(){
		$.ajax({
			  url: "verify",
			  async: false,
			  success: function(data){
				 var data1 = $.parseJSON(data);
				  $("#verify").val(data.code);
				  $("#randCodeImage").attr("src","verifyCode?uuid="+data1.uuid);
			  }
			});
	});
	$("#but_login").click(function(){
		var verify = $("#verify").val();
		var randCode = $("#randCode").val();
		if(verify==randCode){
			$("form").submit();
		}else{
			layui.use('layer', function(){
				  var layer = layui.layer;
				  
				  layer.msg('验证码错误');
				});              
			return false;
		}
	});
	</script>
</body>
</html>